<template>
  <div
    v-if="visible"
    class="map-com-legend-container position-right"
    :class="{ 'legend-collapsed': collapsed }"
    @click.stop
  >
    <div class="map-com-legend-title">
      <span>图例</span>
      <span>
        <a-icon-font
          type="iconicon-beifen"
          @click="collapsed = !collapsed"
        ></a-icon-font>
      </span>
    </div>
    <div
      id="map-com-legend-root"
      :ref="`mapComLegendRoot${baseId}`"
      class="map-com-legend-content four-px-scroll-y"
    ></div>
  </div>
</template>

<script lang="ts">
/**
 * 地图图例
 */
import { Component, Watch, Vue, Prop } from 'vue-property-decorator'
import Draggabilly from 'draggabilly'
import LegendControl from '@/components/gis/map-package/map-controls/mapbox-legend'

@Component({
  components: {},
})
export default class GisSearch extends Vue {
  @Prop({ type: Boolean, default: true }) visible!: boolean
  // @Prop({ type: String }) id!: string
  @Prop({ type: String }) baseId!: string
  @Prop({ type: Boolean, default: false }) overallFolding!: boolean // 总体折叠
  @Prop({ type: Object, default: () => {} }) mapBoxInstance!: any // 地图实例
  @Prop({ type: Boolean, default: false }) draggable!: boolean // 是否可拖拽
  @Prop({ type: String }) parentContainer!: string // 可拖拽的父容器
  public drag: any = null
  public collapsed: boolean = false
  public legendControl: any = null

  @Watch('overallFolding', { immediate: true })
  private watchOverallFolding(value: boolean) {
    if (value) {
      this.collapsed = value
    }
  }

  @Watch('visible', { immediate: true })
  private watchVisible(value: boolean) {
    const that = this
    if (value) {
      this.$nextTick(() => {
        if (this.draggable && this.parentContainer) {
          const $overlay = document.querySelector(
            `.${this.parentContainer}`
          ) as HTMLDivElement
          const $element = document.querySelector(
            '.map-com-legend-container'
          ) as HTMLDivElement
          that.drag = new Draggabilly($element, {
            containment: $overlay,
            grid: [1, 1],
          })
        }
        this.addMapLegend()
        this.updateLegend()
      })
    } else {
      this.removeLegend()
    }
  }

  /**
   * init map legend
   */
  public addMapLegend() {
    this.legendControl = new LegendControl(
      {
        collapsed: true,
        toggler: false,
        baseId: this.baseId,
      },
      ['label', 'arrow', 'base-empty-layer'] // label 为相对图层的 label 图层， arrow 为箭头图层， base-empty-layer 为基础空图层
    )
    const controlElement = this.legendControl.onAdd(this.mapBoxInstance)
    if (this.$refs[`mapComLegendRoot${this.baseId}`]) {
      ;(this.$refs[`mapComLegendRoot${this.baseId}`] as Element).append(
        controlElement
      )
    }
  }

  /**
   * 更新图例
   */
  public updateLegend() {
    if (this.legendControl) {
      this.legendControl.updateLegend()
    }
  }

  /**
   * remove map legend
   */
  public removeLegend() {
    if (this.legendControl) {
      this.legendControl.onRemove()
    }
  }
}
</script>

<style scoped lang="less">
@import '@/styles/scroll-bar';

.map-com-legend-container {
  align-items: center;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: calc(100% - 96px);
  max-width: 220px;
  min-width: 179px;
  overflow-y: hidden;
  position: absolute;
  right: 10px;
  top: 10px;

  .map-com-legend-title {
    align-items: center;
    color: #373b52;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    height: 32px;
    justify-content: space-between;
    letter-spacing: 1px;
    line-height: 32px;
    padding: 0 12px;
    width: 100%;
  }

  .map-com-legend-content {
    border-top: 1px solid #eee;
    height: calc(100% - 32px);
    width: 100%;
  }
}

.legend-collapsed {
  height: 32px;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}
</style>
